近年来，随着智能手机的普及，移动端开发受到了异常的关注。
本文旨在让具有一定开发经验的 Web 前端人员以最快的速度了解移动 Web 开发基础以及介绍一些常见问题
首先，使用 HTML5 头部声明
之后是 meta 标签设置，开发移动端页面首先一定要设置 viewport：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
width=device-width：设置视窗宽度为设备视窗宽度，还可以固定宽度，例如： width=640 则是 640px 的宽度（常见于微信）initial-scale=1.0：设置默认缩放比例为 1minimum-scale=1.0、maximum-scale=1.0：最小允许缩放比例和最大允许缩放比例user-scalable=no：禁止用户自由缩放，默认值为 yes提示：一般设置了 user-scalable=no 就不用使用 minimum-scale=1.0 和 maximum-scale=1.0 来强制禁止缩放了
其次是一些辅助优化功能，常用的有如下 meta 标签：
<!-- 禁止浏览器自动识别手机号码和邮箱地址 -->
<meta name="format-detection" content="telephone=no,email=no">
<!-- iphone！全屏模式浏览 -->
<meta name=“apple-mobile-web-app-capable” content=“yes”>
<!-- iphone！顶端的状态条的样式（颜色），其值有：default（白色，默认）、black（黑色）和 black-translucent（灰色半透明）-->
<meta name=“apple-mobile-web-app-status-bar-style” content=“black”>
<!-- iphone！如果把一个 web app 添加到了主屏幕中，那么从主屏幕中打开这个 web app 则全屏显示 -->
<meta name="apple-touch-fullscreen" content="yes">
<!-- iphone！将应用添加到手机主屏幕，会有一个 icon 可以直接进入 -->
<link rel="apple-touch-icon" href="/static/images/icon.png">
提示：其中 iphone！ 代表 iphone 设备中的 safari 浏览器私有 meta 标签
CSS 中，关键点是重置样式和 PC 端有点不同
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /* 使用无衬线字体 */
}
a, img {
-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
-webkit-user-select: none; /* 禁止选中文本 */
user-select: none;
}
button,input,optgroup,select,textarea {
-webkit-appearance: none; /* 去掉 webkit 默认的表单样式 */
}
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0); /* 去掉 a、input 和 button 点击时的蓝色外边框和灰色半透明背景
}
input::-webkit-input-placeholder {
color: #ccc; /* 修改 webkit 中 input 的 planceholder 样式 */
}
input:focus::-webkit-input-placeholder {
color: #f00; /* 修改 webkit 中 focus 状态下 input 的 planceholder 样式 */
}
body {
-webkit-text-size-adjust: 100% !important; /* 禁止 IOS 调整字体大小 */
}
input::-webkit-input-speech-button {
display: none; /* 隐藏 Android 的语音输入按钮 */
}
使用 [[005.CSS 布局：Flex & Grid|Flex 布局]]
在网站文件根目录放一个 apple-touch-icon.png 文件，苹果设备保存网站为书签或桌面快捷方式时，就会使用这个文件作为图标，文件尺寸建议为：180×180
<link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">
<a href="tel:020-10086">打电话给:020-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:me@22278.club">发送邮件: me@22278.club</a>
<input type=file accept="image/*">
上面的文件上传框中，accept 可以限制上传文件的类型，参数为 image/* 是所有图片类型，点击会弹出图库，也可以指定图片格式，参数设置成 image/png 则可以限制图片类型为png；参数如果为 video/* 则是选择视频的意思；accept还可以设置多个文件格式，语法为 accept="image/gif, image/jpeg"
box-shadow 改变（挡住）表单自动填充后的黄色input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
box-shadow:inset 0 0 0 1000px #fff;
}
原理是：上下和左右的边框对接其实是个斜角，利用这个特性，使其中一边的边框透明，另外一边写成想要的颜色并隐藏对边，就可以变成小箭头形状
![[Pasted image 20231101173220.png]]
border-width: 10px 10px 10px 0; //左箭头
border-color: transparent #fff;
border-style: solid;
width: 0;
<div class="box">闻道有先后，术业有专攻！</div>
.box {
position: relative;
padding: 0 20px;
width: 380px;
height: 80px;
border-radius: 8px;
background: #efefef;
font-size: 18px;
line-height: 80px;
}
.box:after {
position: absolute;
top: 50%;
left: -15px;
z-index: 1;
display: block;
margin-top: -15px;
width: 0;
border-color: transparent #efefef;
border-style: solid;
border-width: 15px 15px 15px 0;
content: "";
}
![[Pasted image 20231101173256.png]]
手机浏览器种类 ：
UC 浏览器，QQ 浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器
国内的 UC、QQ、百度等手机浏览器都是根据 Webkit 修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是基于 Android 修改的
全球仅有四大浏览器内核：
目前全球仅有四个独立的浏览器内核，分别为微软 IE 的 Trident、网景最初研发后卖给 Mozilla 基金会并演化成火狐的Gecko、KDE 的开源内核 Webkit 以及 Opera 的 Presto
其中，Presto 是历史最悠久的内核
目前微软的 Trident 在移动终端上主要为 WP7 系统内置浏览器
Opera 的 Presto 内核在所有联网设备上都使用，移动终端上主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋 HD Beta 版
Webkit 内核的适用范围则较为广泛，Android 原生浏览器、苹果的 Safari、谷歌的 Chrome（Android4.0 使用）都是基于 Webkit 开源内核开发的
从实际情况出发：
对于 Android 手机而言，使用率最高的就是 Webkit 内核，我们看到很多手机浏览器厂商都宣称有着自主内核，比如手机 UC 就号称采用了 U3 内核、而华为也经常标榜自己的天天浏览器采用了 T9 内核，事实上，他们都是基于开源内核 Webkit 进行二次开发的，并不是完全的自主内核
而在 iOS 以及 WP7 平台上，由于系统封闭，不允许除系统自带浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均为在 Safari 或者 IE 内核的基础上进行二次开发，优化功能和自制 UI。比如海豚、遨游等浏览器就是直接采用系统自带浏览器的内核，这点从这几款浏览器的 HTML5 评分与系统自带浏览器评分结果完全一致就可以看出
四大浏览器内核优缺点：